<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select name="select" id="select">
        <option value="AAA-VALUE">AAA</option>
        <option value="BBB-VALUE">BBB</option>
        <option value="CCC-VALUE">CCC</option>
        <option value="DDD-VALUE">DDD</option>
        <option value="EEE-VALUE">EEE</option>
    </select>
</body>
<script>
    const selectDOM = document.getElementById('select');
    selectDOM.addEventListener('change',function(event){
        console.log('change--',selectDOM.options[selectDOM.selectedIndex]);
        console.log('change--',event.target);

    })
    //1.采用js新增 option
    // const option1 = document.createElement('option');
    // option1.text = 'FFF';
    // option1.value = 'FFF-VALUE';
    // selectDOM.appendChild(option1);
    //2.采用 Option 构造函数
    // const option2 = new Option('GGG','GGG-VALUE');
    // selectDOM.appendChild(option2);
    //3.使用选择框的 add()方法。
    let newOption3 = new Option("HHH", "HHH-VALUE"); 
    selectDOM.add(newOption3, undefined); // 最佳方案
    let newOption4 = new Option("III", "III-VALUE"); 
    selectDOM.insertBefore(newOption4,selectDOM.options[0]);
</script>
</html>